(function (WGo) {

    "use strict";

// player counter - for creating unique ids
    var pl_count = 0;

// generate DOM of region
    var playerBlock = function (name, parent, visible) {
        var e = {};
        e.element = document.createElement("div");
        e.element.className = "wgo-player-" + name;
        e.wrapper = document.createElement("div");
        e.wrapper.className = "wgo-player-" + name + "-wrapper";
        e.element.appendChild(e.wrapper);
        parent.appendChild(e.element);
        if (!visible) e.element.style.display = "none";
        return e;
    }

// generate all DOM of player
    var BPgenerateDom = function () {
        // wrapper object for common DOM
        this.dom = {};

        // center element
        this.dom.center = document.createElement("div");
        this.dom.center.className = "wgo-player-center";

        // board wrapper element
        this.dom.board = document.createElement("div");
        this.dom.board.className = "wgo-player-board";

        // object wrapper for regions (left, right, top, bottom)
        this.regions = {};

        /*
        pseudo DOM structure:
        <main>
            <left></left>
            <center>
                <top></top>
                <board></board>
                <bottom></bottom>
            </center>
            <right></right>
        </main>
        */

        this.regions.left = playerBlock("left", this.element);
        this.element.appendChild(this.dom.center);
        this.regions.right = playerBlock("right", this.element);

        this.regions.top = playerBlock("top", this.dom.center);
        this.dom.center.appendChild(this.dom.board);
        this.regions.bottom = playerBlock("bottom", this.dom.center);
    }

    var getCurrentLayout = function () {
        var cl = this.config.layout;
        if (cl.constructor != Array) return cl;

        var bh = this.height || this.maxHeight;
        for (var i = 0; i < cl.length; i++) {

            if (!cl[i].conditions || (
                (!cl[i].conditions.minWidth || cl[i].conditions.minWidth <= this.width) &&
                (!cl[i].conditions.minHeight || !bh || cl[i].conditions.minHeight <= bh) &&
                (!cl[i].conditions.maxWidth || cl[i].conditions.maxWidth >= this.width) &&
                (!cl[i].conditions.maxHeight || !bh || cl[i].conditions.maxHeight >= bh) &&
                (!cl[i].conditions.custom || cl[i].conditions.custom.call(this))
            )) {
                return cl[i];
            }
        }
    }

    var appendComponents = function (area) {
        var components;

        if (this.currentLayout.layout) components = this.currentLayout.layout[area];
        else components = this.currentLayout[area];

        if (components) {
            this.regions[area].element.style.display = "block";

            if (components.constructor != Array) components = [components];

            for (var i in components) {
                if (!this.components[components[i]]) this.components[components[i]] = new BasicPlayer.component[components[i]](this);

                this.components[components[i]].appendTo(this.regions[area].wrapper);

                // remove detach flag
                this.components[components[i]]._detachFromPlayer = false;
            }
        } else {
            this.regions[area].element.style.display = "none";
        }

    }

    var manageComponents = function () {
        // add detach flags to every widget
        for (var key in this.components) {
            this.components[key]._detachFromPlayer = true;
        }

        appendComponents.call(this, "left");
        appendComponents.call(this, "right");
        appendComponents.call(this, "top");
        appendComponents.call(this, "bottom");

        // detach all invisible components
        for (var key in this.components) {
            if (this.components[key]._detachFromPlayer && this.components[key].element.parentNode) this.components[key].element.parentNode.removeChild(this.components[key].element);
        }
    }

    /**
     * Main object of player, it binds all magic together and produces visible player.
     * It inherits some functionality from WGo.Player, but full html structure is done here.
     *
     * Layout of player can be set. It can be even dynamic according to screen resolution.
     * There are 5 areas - left, right, top and bottom, and there is special region for board.
     * You can put BasicPlayer.Component objects to these regions. Basic components are:
     *  - BasicPlayer.CommentBox - box with comments and game informations
     *  - BasicPlayer.InfoBox - box with information about players
     *  - BasicPlayer.Control - buttons and staff for control
     *
     * Possible configurations:
     *  - sgf: sgf string (default: undefined)
     *  - json: kifu stored in json/jgo (default: undefined)
     *  - sgfFile: sgf file path (default: undefined)
     *  - board: configuration object of board (default: {})
     *  - enableWheel: allow player to be controlled by mouse wheel (default: true)
     *  - lockScroll: disable window scrolling while hovering player (default: true)
     *  - enableKeys: allow player to be controlled by arrow keys (default: true)
     *  - kifuLoaded: extra Player's kifuLoaded event listener (default: undefined)
     *  - update: extra Player's update event listener (default: undefined)
     *  - frozen: extra Player's frozen event listener (default: undefined)
     *  - unfrozen: extra Player's unfrozen event listener (default: undefined)
     *  - layout: layout object. Look below how to define your own layout (default: BasicPlayer.dynamicLayout)
     *
     * You also must specify main DOMElement of player.
     */

    var BasicPlayer = WGo.extendClass(WGo.Player, function (elem, config) {
        this.config = config;

        // add default configuration of BasicPlayer
        for (var key in BasicPlayer.default) if (this.config[key] === undefined && BasicPlayer.default[key] !== undefined) this.config[key] = BasicPlayer.default[key];
        // add default configuration of Player class
        for (var key in WGo.Player.default) if (this.config[key] === undefined && WGo.Player.default[key] !== undefined) this.config[key] = WGo.Player.default[key];

        this.element = elem
        this.element.innerHTML = "";
        this.classes = (this.element.className ? this.element.className + " " : "") + "wgo-player-main";
        this.element.className = this.classes;
        if (!this.element.id) this.element.id = "wgo_" + (pl_count++);

        BPgenerateDom.call(this);

        this.board = new WGo.Board(this.dom.board, this.config.board);

        this.init();

        this.components = {};


        window.addEventListener("resize", function () {
             WGo.updatePosition();
            if (!this.noresize) {
                this.updateDimensions();
            }
            WGo.drawWinrate();
            WGo.drawWinrate2();
             // setTimeout(function(){  }, 100);

        }.bind(this));

        function bodyScale() {

            var devicewidth = document.documentElement.clientWidth;
            var deviceheight =document.documentElement.clientHeight;
                // if (deviceheight / devicewidth > 1697 / 980) {
                //     deviceheight = devicewidth * 1697 / 980;
                // }
            //alert(devicewidth+"_"+deviceheight);
            var o = document.getElementById("main");
            if (deviceheight > devicewidth)
            { WGo.isWideMode = false;
           }
            else {
                WGo.isWideMode = true;
            }
            if (WGo.isWideMode) {
                if (WGo.isWideMode)
                { o.style.height = (100) + "%"}
                else
                   {o.style.height = (96) + "%"
                   }
                o.style.width = (100) + "%";
                WGo.trueScale = 1;
                document.body.style.zoom = 1;
            } else {

                var scale = deviceheight / 980.0;
                var w = devicewidth / scale;
                o.style.height = (934) + "px";
                o.style.width = 100+ "%";
                document.body.style.zoom = scale;
                WGo.trueScale = scale;
                if (!WGo.isWideMode) {
                    if(WGo.isPC)
                        WGo.commentheight =Math.max(845-w,185);
                        else
                    WGo.commentheight =Math.max(843-w,185);
                }
            }
            WGo.mainWidth= o.offsetWidth;
            WGo.mainHeight= o.offsetHeight;
            document.body.addEventListener('touchmove', bodyScroll, false);

if(WGo.isPC)
{
    var o1 = document.getElementsByClassName("downbutton");
    for (var i = 0; i < o1.length; i++) {
        o1[i].style.border = "none";
    }
}

        }

        function bodyScroll(event) {

            event.preventDefault();

        }

        //window.onload = window.onresize = function () {

        //};
        bodyScale();
        this.updateDimensions();
        this.initGame();

    });

    /**
     * Append player to different element.
     */

    BasicPlayer.prototype.appendTo = function (elem) {
        elem.appendChild(this.element);
        this.updateDimensions();
    }

    /**
     * Set right dimensions of all elements.
     */

    BasicPlayer.prototype.updateDimensions = function () {
        var css = window.getComputedStyle(this.element);

        var els = [];
        while (this.element.firstChild) {
            els.push(this.element.firstChild);
            this.element.removeChild(this.element.firstChild);
        }

        var tmp_w = parseInt(css.width);
        var tmp_h = parseInt(css.height);
        var tmp_mh = parseInt(css.maxHeight) || 0;

        for (var i = 0; i < els.length; i++) {
            this.element.appendChild(els[i]);
        }

        if (tmp_w == this.width && tmp_h == this.height && tmp_mh == this.maxHeight) return;

        this.width = tmp_w;
        this.height = tmp_h;
        this.maxHeight = tmp_mh;

        this.currentLayout = getCurrentLayout.call(this);

        if (this.currentLayout && this.lastLayout != this.currentLayout) {
            if (this.currentLayout.className) this.element.className = this.classes + " " + this.currentLayout.className;
            else this.element.className = this.classes;
            manageComponents.call(this);
            this.lastLayout = this.currentLayout;
        }
// if( WGo.positionPercent)
//         var bw = this.width*WGo.positionPercent;
// else //if(this.width*0.7>this.height)
//     var bw = this.width*0.7;
//else
   // var bw= this.width*0.7-44;
        var bw = this.dom.board.clientWidth;
        var bh = this.height || this.maxHeight;

        if (bh) {
            bh -= this.regions.top.element.offsetHeight + this.regions.bottom.element.offsetHeight;
        }

        if (bh && bh < bw) {
            if (bh != this.board.height) this.board.setHeight(bh);
        } else {
            if (bw != this.board.width) this.board.setWidth(bw);
        }

        var diff = bh - bw;

        if (diff > 0) {
            this.dom.board.style.height = bh + "px";
            this.dom.board.style.paddingTop = (diff / 2) + "px";
        } else {
            this.dom.board.style.height = "auto";
            this.dom.board.style.paddingTop = "0";
        }

        this.regions.left.element.style.height = this.dom.center.offsetHeight + "px";
        this.regions.right.element.style.height = this.dom.center.offsetHeight + "px";

        for (var i in this.components) {
            if (this.components[i].updateDimensions) this.components[i].updateDimensions();
        }
    }

    window.addEventListener("orientationchange", function () {
            // Announce the new orientation number
            //	alert("改变了");
            var devicewidth = document.documentElement.clientWidth;
            var deviceheight = document.documentElement.clientHeight;
            if (deviceheight > devicewidth) {
                BasicPlayer.default = {
                    layout: BasicPlayer.layouts["one_column"],
                    //layout: BasicPlayer.dynamicLayout,
                }
            } else {
                BasicPlayer.default = {
                    layout: BasicPlayer.dynamicLayout,
                }
            }//alert("改变了5");
            location.reload(false);
            //this.updateDimensions();

        },//bind(this));
        false);
    /**
     * Layout contains built-in info box, for displaying of text(html) messages.
     * You can use this method to display a message.
     *
     * @param text or html to display
     * @param closeCallback optional callback function which is called when message is closed
     */

    BasicPlayer.prototype.showMessage = function (text, closeCallback, permanent) {
        this.info_overlay = document.createElement("div");
        this.info_overlay.style.width = this.element.offsetWidth + "px";
        this.info_overlay.style.height = this.element.offsetHeight + "px";
        this.info_overlay.className = "wgo-info-overlay";
        this.element.appendChild(this.info_overlay);

        var info_message = document.createElement("div");
        info_message.className = "wgo-info-message";
        info_message.innerHTML = text;

        var close_info = document.createElement("div");
        close_info.className = "wgo-info-close";
        if (!permanent) close_info.innerHTML = WGo.t("BP:closemsg");

        info_message.appendChild(close_info);

        this.info_overlay.appendChild(info_message);

        if (closeCallback) {
            this.info_overlay.addEventListener("click", function (e) {
                closeCallback(e);
            });
        } else if (!permanent) {
            this.info_overlay.addEventListener("click", function (e) {
                this.hideMessage();
            }.bind(this));
        }

        this.setFrozen(true);
    }

    /**
     * Hide a message box.
     */

    BasicPlayer.prototype.hideMessage = function () {
        this.element.removeChild(this.info_overlay);
        this.setFrozen(false);
    }

    /**
     * Error handling
     */

    BasicPlayer.prototype.error = function (err) {
        if (!WGo.ERROR_REPORT) throw err;

        var url = "#";

        switch (err.name) {
            case "InvalidMoveError":
                this.showMessage("<h1>" + err.name + "</h1><p>" + err.message + "</p><p>If this message isn't correct, please report it by clicking <a href=\"" + url + "\">here</a>, otherwise contact maintainer of this site.</p>");
                break;
            case "FileError":
                this.showMessage("<h1>" + err.name + "</h1><p>" + err.message + "</p><p>Please contact maintainer of this site. Note: it is possible to read files only from this host.</p>");
                break;
            default:
                this.showMessage("<h1>" + err.name + "</h1><p>" + err.message + "</p><pre>" + err.stacktrace + "</pre><p>Please contact maintainer of this site. You can also report it <a href=\"" + url + "\">here</a>.</p>");
        }
    }

    BasicPlayer.component = {};

    /**
     * Preset layouts
     * They have defined regions as arrays, which can contain components. For each of these layouts each component specifies where it is placed.
     * You can create your own layout in same manners, but you must specify components manually.
     */

    BasicPlayer.layouts = {
        "one_column": {
            top: [],
            bottom: [],
        },
        "no_comment": {
            top: [],
            bottom: [],
        },
        "right_top": {
            top: [],
            right: [],
            bottom: [],
        },
        "right": {
            right: [],
        },
        "minimal": {
            bottom: []
        },
    };

    /**
     * WGo player can have more layouts. It allows responsive design of the player.
     * Possible layouts are defined as array of object with this structure:
     *
     * layout = {
     *   Object layout, // layout as specified above
     *   Object conditions, // conditions that has to be valid to apply this layout
     *   String className // custom classnames
     * }
     *
     * possible conditions:
     *  - minWidth - minimal width of player in px
     *  - maxWidth - maximal width of player in px
     *  - minHeight - minimal height of player in px
     *  - maxHeight - maximal height of player in px
     *  - custom - function which is called in template context, must return true or false
     *
     * Player's template evaluates layouts step by step and first layout that matches the conditions is applied.
     *
     * Look below at the default dynamic layout. Layouts are tested after every window resize.
     */

    BasicPlayer.dynamicLayout = [
        {
            conditions: {
                minWidth: 650,
            },
            layout: BasicPlayer.layouts["right_top"],
            className: "wgo-twocols wgo-large",
        },
        {
            conditions: {
                minWidth: 550,
                minHeight: 600,
            },
            layout: BasicPlayer.layouts["one_column"],
            className: "wgo-medium"
        },
        {
            conditions: {
                minWidth: 350,
            },
            layout: BasicPlayer.layouts["no_comment"],
            className: "wgo-small"
        },
        {	// if conditions object is omitted, layout is applied
            layout: BasicPlayer.layouts["no_comment"],
            className: "wgo-xsmall",
        },
    ];

// default settings, they are merged with user settings in constructor.

    var devicewidth = document.documentElement.clientWidth;
    var deviceheight = document.documentElement.clientHeight;
    if (deviceheight > devicewidth) {
        BasicPlayer.default = {
            layout: BasicPlayer.layouts["one_column"],
            //layout: BasicPlayer.dynamicLayout,
        }
    } else {
        BasicPlayer.default = {
            layout: BasicPlayer.dynamicLayout,
        }
    }
    WGo.i18n.en["BP:closemsg"] = "click anywhere to close this window";


//--- Handling <div> with HTML5 data attributes -----------------------------------------------------------------

    BasicPlayer.attributes = {
        "data-wgo": function (value) {
            if (value) {
                if (value[0] == "(") this.sgf = value;
                else this.sgfFile = value;
            }
        },

        "data-wgo-board": function (value) {
            // using eval to parse strings like "stoneStyle: 'painted'"
            this.board = eval("({" + value + "})");
        },

        "data-wgo-onkifuload": function (value) {
            this.kifuLoaded = new Function(value);
        },

        "data-wgo-onupdate": function (value) {
            this.update = new Function(value);
        },

        "data-wgo-onfrozen": function (value) {
            this.frozen = new Function(value);
        },

        "data-wgo-onunfrozen": function (value) {
            this.unfrozen = new Function(value);
        },

        "data-wgo-layout": function (value) {
            this.layout = eval("({" + value + "})");
        },

        "data-wgo-enablewheel": function (value) {
            if (value.toLowerCase() == "false") this.enableWheel = false;
        },

        "data-wgo-lockscroll": function (value) {
            if (value.toLowerCase() == "false") this.lockScroll = false;
        },

        "data-wgo-enablekeys": function (value) {
            if (value.toLowerCase() == "false") this.enableKeys = false;
        },

        "data-wgo-rememberpath": function (value) {
            if (value.toLowerCase() == "false") this.rememberPath = false;
        },

        "data-wgo-allowillegal": function (value) {
            if (value.toLowerCase() != "false") this.allowIllegalMoves = true;
        },

        "data-wgo-move": function (value) {
            var m = parseInt(value);
            if (!isNaN(m)) this.move = m;
            else this.move = eval("({" + value + "})");
        },

        "data-wgo-marklastmove": function (value) {
            if (value.toLowerCase() == "false") this.markLastMove = false;
        },

        "data-wgo-diagram": function (value) {
            if (value) {
                if (value[0] == "(") this.sgf = value;
                else this.sgfFile = value;

                this.markLastMove = false;
                this.enableKeys = false;
                this.enableWheel = false;
                this.layout = {top: [], right: [], left: [], bottom: []};
            }
        }
    }

    var player_from_tag = function (elem) {
        var att, config, pl;

        config = {};

        for (var a = 0; a < elem.attributes.length; a++) {
            att = elem.attributes[a];
            if (BasicPlayer.attributes[att.name]) BasicPlayer.attributes[att.name].call(config, att.value, att.name);
        }

        pl = new BasicPlayer(elem, config);
        elem._wgo_player = pl;
    }

    WGo.BasicPlayer = BasicPlayer;
    WGo.player_from_tag=player_from_tag;



    window.addEventListener("load", function () {
        setTimeout(function (){
            var pl_elems = document.querySelectorAll("[data-wgo],[data-wgo-diagram]");

            for (var i = 0; i < pl_elems.length; i++) {
                player_from_tag(pl_elems[i]);
            }
        }, 300);

    });

    // var o = document.getElementsByName("wgo-button2");
    // o.style.width=(200)+"px";
})(WGo);
